<script setup lang="ts">
import { usetreeStore } from '@/stores/index'
import { Medal, Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { convertTree } from '@/utils/publicMethods'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { useRouter } from 'vue-router'
import { getTopApi, getDataListApi } from '@/api/huaxiang'

// const route = useRoute()
// console.log(route)
// 前十名 后十名 排名
const rankTopArry = ref<any>([])
const rankBottomArry = ref<any>([])
const getRankListFn = async () => {
  const params = {
    sqlId: 'engineerProfile.getTop',
    sqlParam: {},
    pagination: false,
    dbName: 'doris',
    debug: 0,
    type: 'string'
  }
  await getTopApi(params).then((res: any) => {
    // console.log(res.rows)
    rankTopArry.value = res.rows.filter((item: any) => item.levelFlag === '1')
    rankBottomArry.value = res.rows.filter((item: any) => item.levelFlag === '2')
  })
}

const treeStore = usetreeStore()
const loading = ref(true)

const total = ref<any>(0)
const tableList = ref<any>([])

const fromData = ref({
  idSel: '',
  realName: '',
  page: 1,
  rows: 10
})

const getTableList = async () => {
  loading.value = true
  const params = {
    sqlId: 'engineerProfile.getDataList',
    sqlParam: JSON.stringify({
      realName: fromData.value.realName,
      idSel: fromData.value.idSel.length !== 0 ? fromData.value.idSel : ''
    }),
    pagination: true,
    dbName: 'doris',
    debug: 0,
    type: 'string',
    page: fromData.value.page,
    rows: fromData.value.rows
  }
  await getDataListApi(params).then((res: any) => {
    console.log(res)
    tableList.value = res.rows
    total.value = res.total
    loading.value = false
  })
}

const huaXiaoTreeArry = JSON.parse(JSON.stringify(convertTree(treeStore.huaXiaoTreeList)))
const huaXiaoTreeFn = (node: Node, resolve: (data: any[]) => void) => {
  // 树形结构地域
  if (node.level === 0) {
    const info = huaXiaoTreeArry.map((item: any) => {
      return {
        value: item.value,
        label: item.label,
        children: item.children
      }
    })
    return resolve(info)
  }

  if (node.level > 1) {
    if (!node.data.children) {
      node.data.children = []
    } else {
      setTimeout(() => {
        const data = node.data.children
        resolve(data)
      }, 500)
    }
  }
  setTimeout(() => {
    const data = node.data.children
    resolve(data)
  }, 500)
}

// 查询
const searchBtn = () => {
  fromData.value.page = 1
  fromData.value.rows = 10
  getTableList()
}

// 跳转路由
const router = useRouter()
const gotoPage = (id: string) => {
  // path: string
  router.push({
    path: `/ZhuangWeiYeWu/ZhuangWeiGongZuoLiangHeSuan/GongChengShiHuaXiang/Details`,
    query: {
      userId: id
    }
  })
}
// 详情
const detailsBtn = (row: any) => {
  gotoPage(row.id)
}
const detailsTopBtn = (row: any) => {
  gotoPage(row.userId)
}

const handleSizeChange = (val: number) => {
  fromData.value.page = 1
  fromData.value.rows = val
  getTableList()
}

const handleCurrentChange = (val: number) => {
  fromData.value.page = val
  getTableList()
}

onMounted(() => {
  treeStore.getHxTree()
  getRankListFn()
  getTableList()
})
</script>
<template>
  <div class="GeRenJiFenBox">
    <div class="rankBox">
      <h3 class="topBox">
        <svg-icon color="#eb6957" className="iconBox" iconName="icon-xiaolian-line"></svg-icon>
        <span>前10名</span>
      </h3>
      <div class="rankList">
        <el-scrollbar>
          <div class="rankItem" v-if="rankTopArry[0]" @click="detailsTopBtn(rankTopArry[0])">
            <svg-icon className="iconBox" iconName="icon-jinpai"></svg-icon>
            <div class="rankInfo">
              <span class="rankName">{{ rankTopArry[0].userName }}</span>
              <span class="rankScore">{{ rankTopArry[0].userScore }}分</span>
            </div>
          </div>
          <div class="rankItem" v-if="rankTopArry[1]" @click="detailsTopBtn(rankTopArry[1])">
            <svg-icon className="iconBox" iconName="icon-yinpai"></svg-icon>
            <div class="rankInfo">
              <span class="rankName">{{ rankTopArry[1].userName }}</span>
              <span class="rankScore">{{ rankTopArry[1].userScore }}分</span>
            </div>
          </div>
          <div class="rankItem" v-if="rankTopArry[2]" @click="detailsTopBtn(rankTopArry[2])">
            <svg-icon className="iconBox" iconName="icon-tongpai"></svg-icon>
            <div class="rankInfo">
              <span class="rankName">{{ rankTopArry[2].userName }}</span>
              <span class="rankScore">{{ rankTopArry[2].userScore }}分</span>
            </div>
          </div>
          <template v-if="rankTopArry.length > 3">
            <div
              class="rankItem"
              v-for="i in rankTopArry.slice(3)"
              :key="i.id"
              @click="detailsTopBtn(i)"
            >
              <el-icon class="iconBox" style="font-size: 20px; text-align: center"
                ><Medal
              /></el-icon>
              <div class="rankInfo">
                <span class="rankName">{{ i.userName }}</span>
                <span class="rankScore">{{ i.userScore }}分</span>
              </div>
            </div>
          </template>
        </el-scrollbar>
      </div>
      <h3 class="topBox" style="">
        <svg-icon color="#000" className="iconBox" iconName="icon-kulian"></svg-icon>
        <span>后10名</span>
      </h3>
      <div class="rankList">
        <el-scrollbar>
          <div class="rankItem" v-for="i in rankBottomArry" :key="i.id" @click="detailsTopBtn(i)">
            <el-icon class="iconBox" style="font-size: 20px; text-align: center"><Medal /></el-icon>
            <div class="rankInfo">
              <span class="rankName">{{ i.userName }}</span>
              <span class="rankScore">{{ i.userScore }}分</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="contentBox">
      <el-form :inline="true" :model="fromData" style="margin-top: 15px">
        <el-form-item label="组织关系树：">
          <el-tree-select
            lazy
            :load="huaXiaoTreeFn"
            v-model="fromData.idSel"
            :data="huaXiaoTreeArry"
            multiple
            :multiple-limit="1"
            node-key="value"
            :render-after-expand="false"
            style="width: 240px"
            check-strictly
            check-on-click-node
          />
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="fromData.realName" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="searchBtn">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        class="TableBox"
        v-loading="loading"
        :data="tableList"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="人员账号" />
        <el-table-column prop="realName" label="姓名" />
        <el-table-column prop="fjName" label="分局" />
        <el-table-column prop="zjName" label="支局" />
        <el-table-column prop="wgName" label="网格" />
        <el-table-column prop="consign" label="支付能力" />
        <el-table-column prop="study" label="学习能力" />
        <el-table-column prop="assure" label="保障能力" />
        <el-table-column prop="uphold" label="主动维护能力" />
        <el-table-column prop="sales" label="随销能力" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button text type="primary" @click="detailsBtn(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="paginationBox"
        v-model:current-page="fromData.page"
        v-model:page-size="fromData.rows"
        :page-sizes="[10, 20, 30, 40]"
        size="default"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
.GeRenJiFenBox {
  width: 100%;
  height: calc(100vh - 150px);
  display: flex;
  justify-content: center;
  align-items: center;
  .rankBox {
    width: 300px;
    min-width: 300px;
    height: 100%;
    margin-right: 10px;
    .topBox {
      border-right: 1px solid var(--cnac-bgc1);
      padding: 8px 20px;
      font-size: 22px;
      line-height: 30px;
      border-bottom: 1px solid var(--cnac-bgc1);
      .iconBox {
        vertical-align: sub;
      }
      span {
        font-weight: 700;
        font-size: 18px;
        padding-left: 20px;
      }
    }
    .rankList {
      width: 100%;
      height: calc(100% - 56%);
      border-right: 1px solid var(--cnac-bgc1);
      border-bottom: 1px solid var(--cnac-bgc1);
      .rankItem {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        align-self: center;
        justify-content: space-between;
        cursor: pointer;
        border-bottom: 1px solid var(--cnac-bgc1);
        .iconBox {
          margin-top: 10px;
          padding: 0 15px;
          display: inline-block;
          width: 60px;
          height: 20px;
        }
        .rankInfo {
          display: inline-flex;
          flex: 1;
          span {
            font-size: 14px;
          }
          .rankName {
            flex: 1;
          }
          .rankScore {
            width: 50px;
            padding-right: 8px;
          }
        }
      }
      .rankItem:hover {
        color: #fff !important;
        background-color: var(--cnac-main);
      }
    }
  }
  .contentBox {
    flex: 1;
    height: 100%;
    padding: 8px;
    .TableBox {
      height: calc(100vh - 270px);
    }
    .paginationBox {
      bottom: 20px;
    }
  }
}
</style>
